<template>
	<view>
		<view class="login-img">
			<view class="owl-login" :class="hideEyes?'password':''">
				<view class="hand"></view>
				<view class="hand hand-r"></view>
				<view class="arms">
					<view class="arm"></view>
					<view class="arm arm-r"></view>
				</view>
			</view>
		</view>
		<view class="login-form">
			<form @submit="formSubmit">
				<view class="form-input">
					<input type="text" value="" name='username' placeholder="用户名" />
				</view>
				<view class="form-input">
					<input type="password" value="" name='password' placeholder="密码" @focus="passwordF_B"
						@blur="passwordF_B" />
				</view>
				<button type="primary" form-type="submit">登录</button>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hideEyes: false,
			}
		},
		methods: {
			passwordF_B() {
				this.hideEyes = !this.hideEyes;
			},
			formSubmit(e) {
				console.log(e.detail.value);
				// 获取到数据发起请求
				if (!e.detail.value.username || !e.detail.value.password) {
					uni.showToast({
						title: '请填写账号或密码',
						icon: 'none'
					})
					return false
				}


				uni.request({
					url: this.$httpUrl + '/QrCodeProc/Login',
					// POST/GET
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						StudentNo: e.detail.value.username,
						Password: e.detail.value.password
					},
					success: success => {
					console.log("登录返回的",success.data);
						console.log(success.data.code);
						if(success.data.code===200){
							uni.setStorageSync('login', success.data.data)
							uni.switchTab({
								url: '/pages/home/index'
							});
						}
						
					},
					fail: (fail) => {
						console.log(fail);
						// 失败回调
					}
				});
			}
		}
	}
</script>

<style>
	.login-form {
		margin: -9px 10px 0 10px;
		height: 200px;
		background: #007AFF;
		border-radius: 10px;
		background-color: #EEEEEE;
		box-shadow: 0 2px 10px #9B9B9B;
		padding: 20px;
	}

	.form-input input {
		background: #ffffff;
		border-radius: 5px;
		height: 40px;
		margin: 20px 0;
		padding: 0 10px;
	}

	.login-img {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 108px;
		margin-top: 100rpx;
	}

	.owl-login {
		width: 211px;
		height: 108px;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		position: absolute;
	}

	.owl-login .hand {
		width: 34px;
		height: 34px;
		-webkit-border-radius: 40px;
		border-radius: 40px;
		background-color: #472d20;
		transform: scaleY(0.6);
		transition: 0.3s ease-out;
		position: absolute;
		left: 14px;
		bottom: -8px;
	}

	.owl-login .hand.hand-r {
		left: 170px;
	}

	.owl-login .arms {
		top: 58px;
		position: absolute;
		width: 100%;
		height: 41px;
		overflow: hidden;
	}

	.owl-login .arms .arm {
		width: 40px;
		height: 65px;
		position: absolute;
		left: 20px;
		top: 40px;
		background-image: url("");
		background-size: 100%;
		transition: 0.3s ease-out;
		transform: rotate(-20deg);
	}

	.owl-login .arms .arm.arm-r {
		transform: rotate(20deg) scaleX(-1);
		left: 158px;
	}

	.owl-login.password .hand {
		transform: translateX(42px) translateY(-15px) scale(0.7);
	}

	.owl-login.password .hand.hand-r {
		transform: translateX(-42px) translateY(-15px) scale(0.7);
	}

	.owl-login.password .arms .arm {
		transform: translateY(-40px) translateX(40px);
	}

	.owl-login.password .arms .arm.arm-r {
		transform: translateY(-40px) translateX(-40px) scaleX(-1);
	}
</style>
